<template>
  <div class="main">
    <div class="header">新闻管理 -- {{mark==0?'新增':'编辑'}}</div>
    <div class="content">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="文章标题">
          <el-input v-model="form.title" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="form.author" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="摘要">
          <el-input type="textarea" :rows="2" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="封面图片">
          <el-upload
            class="upload-demo"
            :headers="headers"
            :action="serveHost + '/admin/xy/upload/uploadImg'"
            :on-success="upload"
            :limit="1"
            multiple
          >
            <el-button size="small" type="primary" @click="upload($event)">点击上传</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="显示文章">
          <el-switch v-model="form.isShow"></el-switch>
        </el-form-item>
        <el-form-item label="是否最热">
          <el-switch v-model="form.isHot"></el-switch>
        </el-form-item>
        <el-form-item label="文章显示封面" label-width="60">
          <el-switch v-model="form.isCover"></el-switch>
        </el-form-item>

        <el-form-item :label="showType" label-width="60">
          <el-radio-group v-model="radio" @change="radioChange($event)">
            <el-radio :label="0">Markdown</el-radio>
            <el-radio :label="1">富文本</el-radio>
          </el-radio-group>
        </el-form-item>
        <MarkdownEditor v-if="this.radio==0" v-model="form.mdContent" class="markdown-editor" />
        <TinymceEditor v-else v-model="form.tinyContent" />
        <el-form-item style="float:right;margin-top:20px">
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { save, newsdetail, newsupdate } from "@/api/material/news";
import { uploadImg } from "@/api/material/img";
import { getToken } from '@/utils/myAuth'
import TinymceEditor from "../../../../components/Tinymce";
import MarkdownEditor from "../../../../components/MarkdownEditor";
import settingsFile from "@/settings";
import axios from "axios";
export default {
  components: {
    TinymceEditor,
    MarkdownEditor
  },
  data() {
    return {
      mark: 0,
      flag: false,
      tinyContent: "",
      mdContent: "",
      radio: 0,
      showType: "切换富文本类型",
      form: {},
      serveHost: settingsFile.host,
      cover: "",
      file:{}
    };
  },
  computed: {
    headers(){
      return{
        'bufan-token':getToken()
      }
    }
  },
  created() {
    this.mark = this.$route.params.type;
    if (this.$route.params.item) {
      console.log(this.$route.params.item);
      this.form = this.$route.params.item;
      this.form.mdContent = this.$route.params.item.content1;
      this.form.tinyContent = this.$route.params.item.content1;

      if (this.$route.params.item.hot == "1") {
        this.form.isHot = true;
      }
    }
  },
  mounted() {},
  methods: {
   upload(file) {
      console.log(file);
      this.file = file
    },
    onSubmit() {
      var params = {
        xyNews: {
          title: this.form.title,
          desc: this.form.desc,
          author: this.form.author,
          hot: 0,
          cover: this.serveHost + '/' + this.file.url,
          type: this.radio,
          content1: this.radio ==0 ? this.form.mdContent : this.form.tinyContent,
          content2: ''
        }
      };
      // console.log(this.serveHost+'/'+'media'+'/'+this.cover);
      if (this.$route.params.type == 0) {
        save(params).then(res => {
          console.log(res);
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success"
          });
          this.form = {};
          this.$router.push({ name: "materialNews" });
        });
      } else if (this.$route.params.type == 1) {
        // console.log(this.$route.params.type);
        params.xyNews.id = this.$route.params.item.id;
        console.log(params);
        newsupdate(params).then(res => {
          console.log(res);
          this.$message({
            showClose: true,
            message: "修改成功"
          });
          this.$router.push({ name: "materialNews" });
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.main {
  .header {
    width: 100%;
    height: 50px;
    padding: 20px;
    font-size: 14px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
  }
  .content {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    .markdown-editor {
      ::v-deep .tui-editor {
        .te-md-splitter {
          width: 100%;
        }
      }
    }
  }
}
</style>
